<template>
	<view class="good-wrap">
		<view class="img-wrap">
			<u-lazy-load threshold="0" border-radius="10" :image="good.img" :index="good.id"></u-lazy-load>
		</view>
	  <view class="good-desc">
	  	<view class="good-title">
	  	  {{good.title}}
	  	</view>
	  	<view class="good-price">
	  	  {{good.discountPrice || good.price }}元
	  	</view>
			<view class="delete-price">
			  {{good.discountPrice && good.price }}元
			</view>
	  	<view class="good-tag">
				<view class="tag-item" v-for="(tag, index) in tags" :key="index">
					<u-tag :text="tag" size="mini" mode="dark" shape="circle" bg-color="#fa3534" />
				</view>
	  	</view>
	  	<!-- <view class="good-shop">
	  	  {{good.shop}}
	  	</view> -->
	  </view>
	</view>
</template>

<script>
	export default{
		props: {
			good: Object
		},
		computed: {
			tags() {
				return this.good && this.good.tags && this.good.tags.split(',')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.good-wrap {
		margin-bottom: 10rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(192, 192, 192, 0.16);
		border-radius: 18rpx;
		.img-wrap {
				padding: 20rpx;
				box-sizing: border-box;
		}
		.good-desc {
			padding: 20rpx;
			.good-title {
				font-size: 28rpx;
				font-weight: bold;
			}
			.good-price {
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				font-size: 32rpx;
				color: $uni-theme-color;
			}
			.delete-price {
				margin-bottom: 10rpx;
				text-decoration: line-through;
				font-size: 10px;
				font-weight: 400;
				color: #999999;
			}
			.good-shop {
				color: #999999;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
			.good-tag {
				display: flex;
				align-items: center;
				.tag-item {
					margin-right: 10rpx;
				}
			}
			
		}
		
	}
</style>
